<template>
    <div class = "addbase" >
         <el-container v-loading="loading">
            <el-container>
            <el-main>
            <el-card class="box-card">
              <div class = "title-wrapper">
                <el-input style="float:left;width:200px;"  v-model="searchinput" placeholder="请输入内容"></el-input>
                <el-button @click = "searchbase">搜索</el-button>
                <el-radio-group v-model="radio1" style="margin-left:20px;" @change = "Switchstate">
                            <el-radio-button label="已上架"></el-radio-button>
                            <el-radio-button label="未上架"></el-radio-button>
                </el-radio-group>
             <el-button style="float:right" @click = "newly">新增</el-button>
             <el-select style="float:right;margin-right:20px;" v-model="value" @change = "Fluctuate" placeholder="全部" clearable>
                  <el-option
                    v-for="item in options"
                    :key="item.addressCode"
                    :label="item.name"
                    :value="item.addressCode"
                    @click.native="area(item.addressCode)"
                   >
                  </el-option>
                </el-select>
              </div>
              <div class = "area">
              </div>
            <div class = "baseList-wrapper">
          <el-table
            :data="tableData"
            style="width: 100%"
            >
            <el-table-column
            label="编号"
            prop="id"
            align="center"
            width="100">
            </el-table-column>
            
            <el-table-column
            label="名称"
            prop="name"
            align="center"
            >
            </el-table-column>
            <el-table-column
            label="区域"
            prop="areaName"
            align="center"
            width="120"
            >
            </el-table-column>
            <el-table-column
            label="类型"
            prop="type"
            align="center"
            width="120"
            >
            </el-table-column>
            <el-table-column
            label="权重"
            prop="weight"
            align="center"
            width="100"
            >
            </el-table-column>
            <el-table-column
            label="创建日期"
            prop="createdAt"
            align="center"
            width="150"
            >
            </el-table-column>
            <!-- sortable -->
            <!-- :sort-method="sortChange1" -->
            <el-table-column label="操作" align="center" >
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">基地编辑</el-button>
                <el-button
                size="mini"
                @click="project(scope.$index, scope.row)">基地项目</el-button>
                <el-button
                size="mini"
                @click="rim(scope.$index, scope.row)">基地周边</el-button>
                <el-button
                size="mini"
                @click="account(scope.$index, scope.row)">账户管理</el-button>
                <el-button
                size="mini"
                @click="basetwodimensioncode(scope.$index, scope.row)">二维码</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">{{state}}</el-button>
            </template>
            </el-table-column>
          </el-table>
          <div class = "pagination" style="margin:15px 0;float:right">
          <el-pagination
            background
             @current-change="handleCurrentChange" 
            layout="prev, pager, next"
            :total="totalCount">
          </el-pagination>
          </div>
            </div>
               </el-card>
            </el-main>
            </el-container>
            </el-container>
    </div>
</template>
<script>
import transitionTime from "../../transitionTime"
export default {
    data(){
        return{
        doan:'up',
        state:'下架',
        radio1: '已上架',
        // tableData:[],
        // // 默认显示第几页
        currentPage:1,
        // // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount:10,
        // // 个数选择器（可修改）
        // pageSizes:[5,10,20,30],
        // // 默认每页显示的条数（可修改）
        // PageSize:10,
        // 地区选择
        options: [],
        value: '',
        // 列表数据
        tableData: [],
          // loading
          loading:false,
          // 搜索
          searchinput:''
        }
    },
    created() {
      this.List()
    },
    methods:{
      //上下架
      Switchstate(index){
        if(index === '已上架'){
            this.loading = true
            this.currentPage = 1
            this.totalCount = 10
            this.state='下架'
            this.doan = 'up'
            this.Doan(this.doan)
        } else {
            this.loading = true
            this.currentPage = 1
            this.totalCount = 10
            this.state='上架'
            this.doan = 'down'
            this.Doan(this.doan)
        }
      },
      //切换状态
      Doan(item){
        this.$api.Basetoaddordelete.baseLstdown(this.value,item,this.currentPage,10).then(res => {
            this.tableData = res.data.rows
            this.transition(res)
            this.numberofpages(res)
            this.loading = false
          })
      },
      //判断是否有页数
      numberofpages(item){
          if(item.data.pageCount){
            this.totalCount = item.data.pageCount * 10
          } else {
            this.totalCount = 10
          }
      },
      //搜索
      searchbase(){
        if(this.searchinput){
         this.loading = true
         this.$api.Basetoaddordelete.baserimsearch(this.searchinput,this.doan).then(res => {
          this.tableData = res.data.rows
          this.transition(res)
          this.numberofpages(res)
          this.loading = false
        }).catch(err => {
          console.log(err)
        })
        }
        //  else {
        //   this.loading = true
        //   this.$api.Basetoaddordelete.baseLst(1,10).then(res => {
        //   this.tableData = res.data.rows
        //   this.transition(res)
        //   this.numberofpages(res)
        //   this.loading = false
        // }).catch(err => {
        //   console.log(err)
        //   this.loading = false
        // })
        // }
      },
      Fluctuate(item){
        if(item===''){
          this.List()
        }
      },
      account(index,item){
        this.$router.push('baseaccount')
      },
      sortChange1(a,b){
        return a.weight-b.weight
      },
      //上下架基地
      handleDelete(index,item){
        let type = null
        if(this.state == '上架'){
                type = 'up'
            } else {
                type = 'down'
            }
        this.$confirm('是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.Basetoaddordelete.BaseStandupanddown(item.id,type).then(res => {
            if(res.code === 200){
              this.tableData = this.tableData.filter(data => {
              return data.id !== item.id
            })
            this.$message({
            type: 'success',
            message: '成功!'
          });
          }
        }).catch(err => {
          console.log(err)
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      // 选择区域
      area(item){
        this.loading = true
        this.currentPage = 1
        this.totalCount = 10
        this.$api.Basetoaddordelete.basearea(item,this.currentPage,10).then(res => {
          this.tableData = res.data.bases
          res.data.bases.forEach((element,index) => {
               let time = transitionTime(element.createdAt)
               this.tableData[index].createdAt = time
          });
          this.loading = false
        }).catch(err => {
          console.log(err)
        })
      },
      //获取基地二维码
      
      //获取列表
      Date(){
        this.$api.Basetoaddordelete.baseLst(this.currentPage,10).then(res => {
          this.tableData = res.data.rows
          this.transition(res)
          this.numberofpages(res)
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      //获取默认基地列表
      List(){
        this.loading = true
        if(this.$route.query.radio1){
          this.radio1 = this.$route.query.radio1
        } else if(this.$route.query.compile){
          this.radio1 = this.$route.query.compile
        }
        this.currentPage = 1
        this.totalCount = 10
        if(this.radio1 == '未上架'){
          this.state='上架'
          this.doan = 'down'
          this.Doan(this.doan)
        } else {
          this.Date()
        }
        this.$api.Basetoaddordelete.area().then(res => {
            this.options = res.data
            this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      // 新增
      newly(){
        this.$router.push('Basenav')
      },
      //项目编辑
      project(index,item){
        this.$router.push({path:`Addbasethree?baseId=${item.id}`})
      },
      rim(index,item){
        this.$router.push({path:'Addbaserim',query:{form:item.id}})
      },
      //账户管理
      account(index,item){
        this.$router.push({path:'baseaccount',query:{form:item.id}})
      },
      //查看基地二维码
      basetwodimensioncode(index,item){
        this.$router.push({path:`basetwodimensioncode`,query:{basename:item.name}})
      },
      //基地编辑
      handleEdit(index,item){
        this.loading = true
        this.$router.push(`Basenav?baseId=${item.id}&compile=${this.radio1}`)
        // this.$api.Basetoaddordelete.baseparticulars(item.id).then(res => {
        //   this.loading = false
        // }).catch(err => {
        //   console.log(err)
        // })
        // this.$router.push({path:'Addbaseone',query:{Data:this.tableData}})
      },
        // 改变默认的页数
       handleCurrentChange(val) {
        this.currentPage=val
        this.loading = true
        this.Doan(this.doan)
       },
       transition(res){
            for(let i = 0; i< this.tableData.length; i++){
                if(this.tableData[i].createdAt){
                 let time =  transitionTime(this.tableData[i].createdAt)
                 this.tableData[i].createdAt = time   
                }
                if(this.tableData[i].type === "research_base"){
                  this.tableData[i].type = '研学实践基地'
                } else if(this.tableData[i].type === "social_practice"){
                  this.tableData[i].type = '社会实践基地'
                } else {
                  this.tableData[i].type = '研学实践营地'
                }
            }
        },
    }
}
</script>
<style scoped>
    .addbase{
        width: 100%;
        height: 100%;
    }
    .addbase .box-card .area{
      float: right;
    }
    .addbase .demo-table-expand {
    font-size: 0;
  }
    .addbase .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
    .addbase .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

